<template>
  <div class="productlist">
    <div class="top">
      <van-search
        shape="round"
        show-action
        v-model="searchVal"
        @search="onSearch"
        placeholder="请输入搜索关键词"
        ref="search"
      >
        <template #action>
          <div @click="back">返回</div>
        </template>
      </van-search>
      <div class="tag">
        <van-tag
          class="tag_category"
          v-if="!condition.sid"
          mark
          color="#25c9c3"
          size="medium"
          type="primary"
          @click="$router.push('/category')"
        >
          <span>所有分类</span>
        </van-tag>
        <van-tag
          class="tag_category"
          v-if="condition.sid"
          mark
          closeable
          color="#25c9c3"
          size="medium"
          type="primary"
          @click="$router.push('/category')"
          @close="categoryClose"
        >
          <span>分类：{{ title }}</span>
        </van-tag>
        <van-tag
          class="tag_keyword"
          v-if="condition.keyword"
          plain
          closeable
          color="#25c9c3"
          size="medium"
          type="primary"
          @click="clickKeyword"
          @close="keywordClose"
        >
          <span> 关键词：{{ condition.keyword }} </span>
        </van-tag>
      </div>
      <div class="order">
        <div
          class="price"
          :class="{ active: orderType == 0 }"
          @click="clickPriceOrder"
        >
          价格{{ priceOrder == "desc" ? "降序" : "升序"
          }}<van-icon
            :name="priceOrder == 'desc' ? 'arrow-down' : 'arrow-up'"
          />
        </div>
        <div
          class="sales"
          :class="{ active: orderType == 1 }"
          @click="clickSalesOrder"
        >
          销量{{ salesOrder == "asc" ? "升序" : "降序"
          }}<van-icon :name="salesOrder == 'asc' ? 'arrow-up' : 'arrow-down'" />
        </div>
        <van-dropdown-menu class="new" active-color="#25c9c3">
          <van-dropdown-item
            v-model="condition.news"
            :options="menuOption"
            @change="getProduct()"
          />
        </van-dropdown-menu>
      </div>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="到底了"
        @load="loadMore"
      >
        <div class="wrap">
          <ProductItem
            v-for="item in products"
            :key="item.id"
            :item="item"
          ></ProductItem>
        </div>
        <van-empty v-if="products && products.length == 0" image="search" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ProductItem from "../components/ProductItem.vue";
export default {
  name: "ProductList",
  components: { ProductItem },
  data() {
    return {
      searchVal: null,
      title: null,
      condition: {
        page: 1,
        limit: 8,
        keyword: null,
        sid: null,
        news: 0,
      },
      priceOrder: "asc", // desc降序 asc升序
      salesOrder: "desc",
      orderType: 0,
      products: null,
      menuOption: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
      ],
      loading: false,
      finished: false,
      refreshing: false,
      getting: false,
      currentSearch: {
        keyword: null,
        sid: null,
      },
    };
  },
  activated() {
    this.searchVal = null;
    this.products = null;
    this.condition.page = 1;
    this.finished = false;
    this.getting = false;

    this.condition.sid = this.$route.query.sid;
    this.title = this.$route.query.title;
    this.condition.keyword = this.$route.query.keyword;

    this.getProduct();
  },
  methods: {
    back() {
      if (window.history.length <= 1) {
        this.$router.push("/");
      } else {
        this.$router.go(-1);
      }
    },
    getProduct(loadMore) {
      this.getting = true;
      if (loadMore) {
        this.condition.page++;
      } else {
        this.condition.page = 1;
        this.finished = false;
      }
      this.$axios
        .get("/api/products", {
          params: {
            [this.orderType ? "salesOrder" : "priceOrder"]: this[
              this.orderType ? "salesOrder" : "priceOrder"
            ],
            ...this.condition,
          },
        })
        .then((d) => {
          this.getting = false;
          console.log("products", this.condition.page, d.data);
          if (this.refreshing) this.refreshing = false;
          if (this.loading) this.loading = false;

          if (loadMore) {
            this.products = this.products.concat(d.data.data);
          } else {
            this.products = d.data.data;
          }
          if (d.data.data.length == 0) this.finished = true;
        });
    },
    onSearch() {
      this.condition.keyword = this.searchVal;
      this.getProduct();
      this.$router.replace({
        path: "/productlist",
        query: {
          keyword: this.condition.keyword,
          sid: this.condition.sid,
          title: this.title,
        },
      });
    },
    clickKeyword() {
      var ipt = this.$refs.search.getElementsByTagName("input")[0];
      if (ipt) ipt.focus();
    },
    categoryClose() {
      this.condition.sid = null;
      this.title = null;
      this.getProduct();
      this.$router.replace({
        path: "/productlist",
        query: {
          keyword: this.condition.keyword,
          sid: this.condition.sid,
          title: this.title,
        },
      });
    },
    keywordClose() {
      this.condition.keyword = null;
      this.getProduct();
      this.$router.replace({
        path: "/productlist",
        query: {
          keyword: this.condition.keyword,
          sid: this.condition.sid,
          title: this.title,
        },
      });
    },
    clickPriceOrder() {
      if (this.orderType == 0) {
        this.priceOrder = this.priceOrder == "asc" ? "desc" : "asc";
      }
      this.orderType = 0;
      this.getProduct();
    },
    clickSalesOrder() {
      if (this.orderType == 1) {
        this.salesOrder = this.salesOrder == "asc" ? "desc" : "asc";
      }
      this.orderType = 1;
      this.getProduct();
    },
    clickNewOrder() {
      this.condition.news = this.condition.news == 0 ? 1 : 0;
      this.getProduct();
    },
    loadMore() {
      if (this.getting) return;
      if (!this.products) return;
      this.getProduct(true);
    },
    onRefresh() {
      this.loading = true;
      this.getProduct();
    },
  },
};
</script>

<style lang="less" scoped>
.productlist {
  .top {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
  }
  .tag {
    display: flex;
    align-items: center;
    background: #fff;
    .van-tag {
      margin-top: 5px;
      span {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:not(.tag_category) {
        margin-left: 10px;
      }
    }
  }
  .order {
    display: flex;
    padding: 5px;
    padding-right: 10px;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    height: 50px;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
    .van-icon {
      margin: 0 3px;
      font-size: 14px;
      vertical-align: middle;
    }
    .active {
      color: #25c9c3;
    }
    .new {
      ::v-deep.van-dropdown-menu__bar {
        box-shadow: none;
      }
    }
  }
  .content {
    margin-top: 140px;
    min-height: calc(100vh - 140px);
    .wrap {
      @space: 10px;
      display: flex;
      padding: 0 @space;
      justify-content: space-between;
      flex-wrap: wrap;
      .productItem {
        width: calc((100% - @space) / 2);
        margin: @space 0;
      }
    }
  }
}
</style>